<template>
  <div class="PageNewpolicyList">
    <div class="PageNewpolicyList-wrap">
      <div class="search">
        <el-form :inline="true" @submit.native.prevent>
            <el-form-item >
                <el-input size="small" v-model="searchInput" placeholder="请输入内容" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="handleSearch()">搜索</el-button>
            </el-form-item>
        </el-form>
      </div>
      <div class="table-wrap">
        <el-table
          class="table"
          :data="tableData"
          v-loading="listLoading"
          border
        >
          <el-table-column
            label="ID"
            prop="id"
            width="50">
          </el-table-column>
          <el-table-column
            label="政策标题"
            prop="title"
            width="300">
          </el-table-column>
          <el-table-column
            label="发布日期"
            prop="publishDate"
            width="200">
          </el-table-column>
          <el-table-column
            label="关键词"
            prop="keyword"
            width="500">
            <template slot-scope="scope">
              <el-tag
                :key="tag.keyword"
                v-for="tag in scope.row.newPolicyKeywordList"
                closable
                :disable-transitions="false"
                @close="tagDel(tag.keyword, scope.row.id)">
                {{tag.keyword}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible===scope.$index"
                v-model="inputValue"
                size="small"
                @blur="tagAdd_Confirm(scope.row.id)"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="tagAdd_show(scope.$index)">+ 新增</el-button>

            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
                <router-link :to="{path: '/permission/newpolicyEdit', query: {id:scope.row.id}}">
                    <el-button type="text" size="small">修改</el-button>
                </router-link>
                <el-button @click="delPolicy(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getTableData"
        />

      </div>

    </div>

  </div>
</template>

<script>
  import {addKeywordTag, deleteKeywordTag, tableDataList, deletePolicy} from '@/api/policy-collect-data';
  import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

  export default {
    name: 'PageNewpolicyList',
    components: {Pagination},
    data() {
      return {
        searchInput: '',
        // table: [
        //   {id: 1, prop: 'id', label: 'ID', width: 50, fixed: false},
        //   {id: 2, prop: 'title', label: '政策标题', width: 300, fixed: false},
        //   {id: 3, prop: 'publishDate', label: '发布日期', width: 200, fixed: false},
        //   {id: 4, prop: 'keyword', label: '关键词', width: 500, fixed: false},
        // ],
        tableData: [],
        //tableTagList: [],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10
        },
        inputVisible: '',
        inputValue: '',
        refIndex: ''
      }
    },
    created() {
      this.getTableData();
console.log('newnew=====');
    },
    methods: {
      getTableData() {
        console.log('[getTableData]');
        this.listLoading = true;
        let param = {
          pageSize: this.listQuery.limit,
          pageNum: this.listQuery.page,
          key: this.searchInput,
        };
        tableDataList(param).then(res => {
          console.log('[tableDataList]', res);
          this.tableData = res.result.list;
          //this.tableTagList = res.result.list[0].newPolicyKeywordList;
          this.total = res.result.total;
          this.listLoading = false;
        })
      },
      // 删除标签
      tagDel(tag, newPolicyId) {
        this.$confirm("确定删除?", {type: "warning"}).then(() => {
            this.listLoading = true;
            let param = {keyword: tag, newPolicyId: newPolicyId};
            deleteKeywordTag(param).then(res => {
                this.getTableData();
            })
        }).catch(() => {})
      },

      // 显示添加tag
      tagAdd_show(index) {
        this.inputVisible = index;

      },
      // 添加tag
      tagAdd_Confirm(id) {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.listLoading = true;
          let param = {keyword: inputValue, newPolicyId: id};
          addKeywordTag(param).then(res => {
            // console.log(res.data);
            this.listLoading = false;
            this.getTableData();
          })
        }
        this.inputVisible = '';
        this.inputValue = '';
      },

      handleSearch() {
        this.pageNum = 1;
        this.getTableData();
      },
      delPolicy(policyId) {
        this.$confirm("确定删除?", {type: "warning"}).then(() => {
            let param = {id: policyId};
            this.listLoading = true;
            deletePolicy(param).then(res => {
              this.getTableData();
            })
        }).catch(() => {})
      },

      handleClick(row) {
        console.log(row);
      }
    }
  }
</script>
<style lang="less" scoped>
  .PageNewpolicyList {
    padding-top: 36px;

    .PageNewpolicyList-wrap {
      width: 90%;
      min-width:1200px;
      margin: auto;

      .search {
        width: 300px;
        display: flex;
        margin-bottom: 24px;
      }

      .table-wrap {
        width: 100%;

        .table {
        }
      }

      .pagination {
        margin-top: 24px;
      }

    }

  }
</style>
